<template>
    <div class="container">
        <!-- 个人信息 -->
        <el-row class="infoSelf  mb-6">
            <el-col :span="7" class="shadow-sm">
                <!-- <div class="bg-white rounded-lg p-4 shadow-sm"> -->
                <p class="text-gray-500 text-sm mb-1">当前孕周</p>
                <p class="text-2xl font-semibold">28 周</p>
                <!-- </div> -->
            </el-col>
            <el-col :span="7" class="shadow-sm">
                <p class="text-gray-500 text-sm mb-1">当前体重</p>
                <p class="text-2xl font-semibold">65.5 kg</p>
            </el-col>
            <el-col :span="7" class="shadow-sm">
                <p class="text-gray-500 text-sm mb-1">本周增重</p>
                <p class="text-2xl font-semibold text-green-500">+0.5 kg</p>
            </el-col>
        </el-row>
        <!-- 体重曲线 -->
        <el-row class="bg-white rounded-lg p-6 shadow-sm mb-6">
            <h2 class="text-lg font-medium mb-4">体重变化趋势</h2>
            <div ref="chartRef" class="w-full h-80" style="width: 900px;"></div>
        </el-row>
        <!-- 营养建议 -->
        <div class="rounded-lg p-6 shadow-sm mb-6">
            <h2 class="text-lg font-medium mb-4">今日营养建议</h2>
            <div class="space-y-4">
                <div class="flex items-start mb-4">
                    <el-icon class="text-green-500 mt-1 mr-3">
                        <Food />
                    </el-icon>
                    <div>
                        <h3 class="font-medium">推荐食物</h3>
                        <p class="text-gray-600 mt-1">富含叶酸的深绿色蔬菜、优质蛋白质、全谷物、坚果</p>
                    </div>
                </div>

                <div class="flex items-start mb-4">
                    <el-icon class="text-yellow-500 mt-1 mr-3">
                        <Warning />
                    </el-icon>
                    <div>
                        <h3 class="font-medium">注意事项</h3>
                        <p class="text-gray-600 mt-1">控制糖分摄入，适量运动，保持充足睡眠</p>
                    </div>
                </div>

            </div>

        </div>
        <!--风险提示 -->
        <el-row class="bg-red-50 rounded-lg p-6 border border-red-100 mb-6">
            <!-- 风险提示 -->
            <div class="flex items-start">
                <el-icon class="text-red-500 text-xl mt-1 mr-3">
                    <Warning />
                </el-icon>
                <div>
                    <h3 class="text-red-700 font-medium text-lg ">体重增长偏快</h3>
                    <p class="text-red-600 mt-1 text-lg ">建议咨询营养师调整饮食计划，适当增加运动量</p>
                </div>
            </div>

        </el-row>

        <!-- 底部操作栏 -->
        <el-row class="bg-white rounded-lg p-6 shadow-sm mb-6 ">
            <el-affix position="bottom" :offset="20" style="width: 100%;">
                <el-row>
                    <el-col :span="12"><el-button color="#22c55e" style="color:#fff" round
                            size="large">记录体重</el-button></el-col>
                    <el-col :span="6" :offset="6"><el-button color="#3b82f6" round
                            size="large">记录饮食</el-button></el-col>
                </el-row>
            </el-affix>
        </el-row>
    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { ArrowLeft, Setting, Food, Warning } from '@element-plus/icons-vue';

const chartRef = ref();

const quickActions = [
    { title: '营养师咨询', icon: 'ChatDotRound', iconColor: 'text-blue-500' },
    { title: '经验分享', icon: 'Share', iconColor: 'text-green-500' },
    { title: '知识科普', icon: 'Reading', iconColor: 'text-purple-500' }
];

onMounted(() => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        const option = {
            animation: false,
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['20周', '22周', '24周', '26周', '28周']
            },
            yAxis: {
                type: 'value',
                name: '体重(kg)'
            },
            series: [
                {
                    name: '实际体重',
                    type: 'line',
                    data: [60, 61.5, 63, 64.5, 65.5],
                    itemStyle: {
                        color: '#10B981'
                    }
                },
                {
                    name: '标准范围上限',
                    type: 'line',
                    data: [62, 63.5, 65, 66.5, 68],
                    lineStyle: {
                        type: 'dashed',
                        color: '#9CA3AF'
                    },
                    itemStyle: {
                        color: '#9CA3AF'
                    }
                },
                {
                    name: '标准范围下限',
                    type: 'line',
                    data: [58, 59.5, 61, 62.5, 64],
                    lineStyle: {
                        type: 'dashed',
                        color: '#9CA3AF'
                    },
                    itemStyle: {
                        color: '#9CA3AF'
                    }
                }
            ]
        };
        chart.setOption(option);
    }
});
</script >
<style lang="less" scoped>
.infoSelf .el-col{
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-right: 1.5rem;
}
.el-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.text-green-500 {
    --tw-text-opacity: 1;
    color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity));
}

.space-y-4{
    font-size: 1rem;  
}

</style>